<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">学生详情</block>
		</cu-custom>
		
		<view class="school_name">
			<view class="flex school_box">
				<view class="schoolBox_imag"><image :src="avatar" class="minSchool_img" @tap="previewImage(avatar)"></image></view>
				
				<view class="school_text">
					<view class="schol_name"><text>{{nickname}}</text></view>
					<view class="schol_title"><text>{{school_name}}</text></view>
				</view>
				
				<view class="circle">
					<view class="iconfont icon-quanzi quanzi"></view>
					<view class="font_training" @tap="to_tarining_circle()">实训圈</view>
				</view>
				
			</view>
		</view>
		
		<view class="school_content">
			
			<view class="select_box flex">
				<view @tap="select_school(1)">
					<view class="text"  :class="a==1?'text_content':'school_environment'" >学生资料</view>
					<view class="text_border"  :style="a==1?'':'background-color: #ffffff;'"></view>
				</view>
				<view @tap="select_school(2)">
					<view class=" font_left text"  :class="a==2?'text_content':'school_environment'">签到记录</view>
					<view class="text_schoolborder"  :style="a==2?'background-color: #3b73f6;':''"></view>
				</view>
			</view>
			
			<view class="school_listbox" v-if="a==1">
				<view class="flex list_box">
					<view class="schoolname_box"><text>姓名</text></view>
					<view class="schoolname_select">
						<view style="text_school">
							{{real_name}}
						</view>
					</view>
				</view>
				
				<view class="flex list_box">
					<view class="schoolname_box"><text>性别</text></view>
					<view class="flex schoolname_select">
						<block>
							<view style="text_school" v-if="gender==0">
								女
							</view>
							<view style="text_school" v-if="gender==1">
								男
							</view>
						</block>
					</view>
				</view>
				
				<view class="flex list_box">
					<view class="schoolname_box"><text>联系电话</text></view>
					<view class="flex schoolname_select" @tap="call(phone)">
						<view style="text_school">
							{{phone}}
						</view>
					</view>
					<view class="iconfont icon-you1 icon_box"></view>
				</view>
				
				
				<view class="flex list_box">
					<view class="schoolname_box"><text>归属学校</text></view>
					<view class="flex schoolname_select">
						<view style="text_school">
							{{school_name}}
						</view>
					</view>
				</view>
				
				<view class="flex list_box">
					<view class="schoolname_box"><text>学习专业</text></view>
					<view class="flex schoolname_select">
						<view style="text_school">
							{{major}}
						</view>
					</view>
				</view>
				
			</view>
			
			<view v-if="a==2" class="school_listbox">
				<view style="background-color: #FFFFFF;" v-for="(item,index) in list" :key="index">
					<view class="cu-timeline"  > 
						<view class="cu-item ">
							<view class="padd_six">
								<block>
									<view class="text_f flex" v-if="item.work_type==1">
										上班打卡时间{{timeToStr(item.add_time,'hh:mm')}} 
										<view class="data_box">日期{{item.date}}</view>
									</view>
									<view class="text_f flex" v-if="item.work_type==2">
										下班打卡时间{{timeToStr(item.add_time,'hh:mm')}}
										<view class="data_box">日期{{item.date}}</view>
									</view>
								</block>
								<view class="text_j flex" @tap="showMap">
									<view class="tubiaoi iconfont icon-dizhi"></view>
									<view class="jxi">{{item.address}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nodata" v-if="list==''&&a==2">暂无签到记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	const { 
		appLogin,
		httpGet,
		httpPost,
		timeToStr
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				page_size:20,
				page:1,
				student_id:0,
				logo:'',
				a: true,
				phone:'',
				list:[],
				timeToStr:timeToStr,
				nickname:'',
				avatar:'',
				school_name:'',
				major:'',
				gender:1,
				real_name:''
			}
		},
		onLoad(option) {
			appLogin((user_info)=>{
				console.log(option)
				this.student_id = option.student_id
			})
		},
		onShow() {
			this.page = 1;
			this.list = [];
			// 清空列表
			this.display()
			this.time()
		},
		onReachBottom() { // 页面滚动到底部
			this.page++
			this.time()
		},
		methods: {
			previewImage(avatar){
				var arr = []
				arr.push(avatar)
				uni.previewImage({
					current:0,
					urls: arr,
				})
			},
			// 拨打电话
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone 
				});
			},
			//显示地图
			showMap(){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        const latitude = res.latitude;
				        const longitude = res.longitude;
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
				    }
				});
			},
			select_school(a){
				if(this.a != a){
					this.a = a
					this.page = 1;
					this.list = [];
					this.time()
				}
			},
			to_tarining_circle(){
				uni.navigateTo({
					url:'training_circle'
				})
			},
			display(){
				httpGet({
					url:'/api/student/info',
					data:{
						student_id:this.student_id
					}
				}).then(res => {
					console.log(res)
					this.nickname = res.result.nickname
					this.avatar = res.result.avatar
					this.school_name = res.result.school_name
					this.phone = res.result.phone
					this.major = res.result.major
					this.gender = res.result.gender
					this.real_name = res.result.real_name
				})
			},
			time(){
				httpGet({
					url:'/api/student/signin_list',
					data:{
						student_id:this.student_id,
						page_size:this.page_size,
						page:this.page
					}
				}).then(res => {
					console.log(res,222)
					this.list = this.list.concat(res.result.list)
				})
			}
		}
	}
</script>

<style>
	
	.font_left{
		margin-left: 147rpx;
	}
	
	.school_name{
		height: 260rpx;
		background-color: #3b73f6;
	
	}
	
	.school_box{
		padding-top: 50rpx;
		padding-left: 45rpx;
		position: relative;
	}
	
	.schoolBox_imag{
		width: 115rpx;
		height: 115rpx;
		border-radius: 180rpx;
		background-color: #3b73f6;
	}
	
	.minSchool_img{
		width: 115rpx;
		height: 115rpx;
		border-radius: 180rpx;
	}
	
	.school_text{
		margin-left: 35rpx;
		padding-top: 15rpx;
	}
	
	.schol_name{
		font-size: 30rpx;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}
	
	.schol_title{
		font-size: 25rpx;
		color: #FFF6EC;
	}
	
	.school_content{
		height: 1130rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -27rpx;
	}
	
	.select_box{
		padding-left: 70rpx;
		padding-top: 70rpx;
	}
	
	.text_content{
		font-size: 31rpx;
		color: #3b73f6;
		font-weight: bold;
	}
	
	.text{
		font-size: 31rpx;
		color: #3b73f6;
	}
	.nodata{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		font-size: larger;
	}
	.text_border{
		width: 80rpx;
		height: 8rpx;
		background-color: #3b73f6;
		margin-left: 20rpx;
		border-radius: 90rpx;
		margin-top: 25rpx;
	}
	
	.school_environment{
		color: #666666;
		font-size: 31rpx;
	}
	
	.text_schoolborder{
		width: 80rpx;
		height: 8rpx;
		background-color: #FFFFFF;
		margin-left: 170rpx;
		border-radius: 90rpx;
		margin-top: 25rpx;
	}
	
	.school_listbox{
		margin-top: 50rpx;
	}
	
	.list_box{
		height: 92rpx;
		border-bottom-style: solid;
		border-color: #fafafa;
		border-width: 4rpx;
		padding-left: 30rpx;
		line-height: 90rpx;
		position: relative;
		justify-content: space-between;
		padding-right: 55rpx;
	}
	
	.schoolname_box{
		font-size: 30rpx;
		color: #666666;
	}
	
	.schoolname_select{
		right: 20rpx;
		margin-left: 200rpx;
		text-align: right;
	}
	
	.text_school{
		color: #333333;
		font-size: 26rpx;
	}
	
	.icon_box{
		color: #999999;
		font-size: 26rpx;
		margin-left: 20rpx;
		position: absolute;
		right: 20rpx;
	}
	
	.set_a{
		height: 92rpx;
		padding-left: 30rpx;
		line-height: 90rpx;
	}
	
	.button_box{
		background-color: #759df9;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		height: 55rpx;
		border-radius: 10rpx;
		line-height: 55rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		margin-right: 20rpx;
	}
	
	.but_listbox{
		margin-left: 30rpx;
	}
	
	.imagelist{
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: 690rpx;
		flex-flow: row wrap;
		justify-content: space-around;
	}
	
	.image_box{
		width: 210rpx;
		height: 210rpx;
		margin-bottom: 15rpx;
	}
	
	.but_box{
		height: 98rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-top-width: 1rpx;
		border-top-color: #e6e6e6;
		line-height: 98rpx;
		position: absolute;
		bottom: 0;
		padding-top: 13rpx;
	}
	
	.btn{
		height: 70rpx;
		width: 690rpx;
		border-radius: 90rpx;
		background-color: #3b73f6;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	
	.modal_box{
		height: 697rpx;
	}
	
	.control_box{
		margin-top: 35rpx;
	}
	
	.apply_text{
		font-size: 31rpx;
		color: #333333;
		font-weight: bold;
		margin-left: 314rpx;
	}
	
	.cancel_text{
		font-size: 26rpx;
		color: #c6c6c6;
		margin-left: 245rpx;
		margin-top: 7rpx;
	}
	
	.imput_information{
		margin-top: 58rpx;
	}
	
	.input_box{
		width: 684rpx;
		margin: auto;
		border-style: solid;
		border-color: #e5e5e5;
		border-width: 2rpx;
		height: 105rpx;
		border-radius: 10rpx;
		padding: 33rpx 25rpx;
	}
	
	.input_phone{
		margin-top: 25rpx;
	}
	
	.person_box{
		font-size: 35rpx;
		color: #3b73f6;
		margin-top: 2rpx;
	}
	
	.linkman{
		margin-left: 15rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.input_name{
		margin-left: 58rpx;
	}
	
	.button_apply{
		width: 688rpx;
		margin: auto;
		margin-top: 180rpx;
		background-color: #3b73f6;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 98rpx;
		height: 98rpx;
		border-radius: 15rpx;
	}
	
	.circle{
		margin-top: 20rpx;
		position: absolute;
		right: 50rpx;
	}
	
	.quanzi{
		margin-left: 17rpx;
		font-size: 40rpx;
		color: #FFF6EC;
	}
	
	.font_training{
		font-size: 27rpx;
		color: #FFF6EC;
	}
	.cu-item {
		display: block;
	}
	.cu-timeline {
		display: block;
	}
	.cu-timeline>.cu-item {
		padding: 80upx 30upx 30upx 180upx;
		position: relative;
		display: block;
		z-index: 0;
	}
	
	.cu-timeline>.cu-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1upx;
		left: 78upx;
		height: 100%;
		top: 0;
		z-index: 8;
	}
	.cu-timeline>.cu-item::before {
		font-family: "cuIcon";
		display: block;
		position: absolute;
		top: 76upx;
		z-index: 9;	
		width: 50upx;
		height: 30upx;
		text-align: center;
		border: none;
		line-height:50upx;
		left: 55upx;
	}
	.padd_six {
		margin-left: -50rpx;
	}
	.text_f {
	    color: #000000;
		margin-bottom: 10rpx;
		font-size: 32rpx;
		margin-top: -20rpx;
	}
	
	.text_i {
		font-size: 32rpx;
		margin-bottom: 210rpx;
		color: #909399;
	}
	
	.text_j {
		background-color: #FFFFFF;
		color: rgb(144,147,153);
		font-size: 24rpx;
	}
	.tubiaoi{
		font-size: 26rpx;
		margin-top: 5rpx;
	}
	.jxi{
		margin-left: 8rpx;
	}
	
	.data_box{
		margin-top: 5rpx;
		font-size: 25rpx;
		color: #666666;
		margin-left: 20rpx;
	}
</style>
